<template>
  <div class="app-container home">
    <!-- app-container -->
    <p style="text-align: center;margin: -10px 0 5px 0;">这是初级履历页面</p>
    <t-ag-grid
      style="width: 100%; height: calc(100vh - 190px);"
      :column-defs="column"
      :row-data="tableData"
      :row-buffer="20"
      row-selection="multiple"
      :suppress-row-click-selection="true"
      :row-multi-select-with-click="true"
      align="center"
      header-align="center"
      />
      <!-- :stripe="false" -->

  </div>
</template>

<script setup lang="ts" name="Index">
  const column = [
    // { headerName: "UUId", field: "id", filter: 'agMultiColumnFilter',
    //   filterParams: {
    //     filters: [
    //       { filter: 'agNumberColumnFilter' },
    //       { filter: 'agSetColumnFilter' }
    //     ]
    //   } },
    { headerName: "UUId", field: "id" },
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" },
    { headerName: "Describe", field: "describe", minWidth: 200, flex: 1 }
  ]

  const tableData = [
    { id:1, make: "Toyota", model: "Celica", price: 35000, describe: 'The Date Filter in the Date column' },
    { id:2, make: "Ford", model: "Mondeo", price: 32000, describe: 'The Date Filter in the Date column' },
    { id:3, make: "Porsche", model: "Boxster", price: 72000, describe: 'The Date Filter in the Date column' },
    { id:4, make: "Porsche", model: "Boxster", price: 72000, describe: 'The Date Filter in the Date column' },
    { id:5, make: "Toyota", model: "Celica", price: 35000, describe: 'The Date Filter in the Date column' },
    { id:6, make: "Toyota", model: "Celica", price: 35000, describe: 'The Date Filter in the Date column' },
    { id:7, make: "Ford", model: "Mondeo", price: 32000, describe: 'The Date Filter in the Date column' },
    { id:8, make: "Ford", model: "Mondeo", price: 32000, describe: 'The Date Filter in the Date column' },
    { id:9, make: "Porsche", model: "Boxster", price: 72000, describe: 'The Date Filter in the Date column' }
  ]
</script>

<style scoped lang="less">
.home {
  // text-align: center;
}
</style>

